
<template>
  <div class="seting-box">
    <van-popup v-model:show="showPicker" round position="bottom">
      <van-picker
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <s-header :name="'账号管理'"></s-header>
    <div class="input-item">
      <van-field v-model="nickName" label="昵称" />
      <van-field v-model="country" label="国籍" />
      <van-field
        v-model="value"
        is-link
        readonly
        label="城市"
        placeholder="选择城市"
        @click="showPicker = true"
      />

      <van-field v-model="description" label="个性签名" />
    </div>
    <van-button
      round
      class="save-btn"
      color="#1baeae"
      type="primary"
      @click="save"
      block
      >保存</van-button
    >
    <van-button
      round
      class="save-btn"
      color="#1baeae"
      type="primary"
      @click="handleLogout"
      block
      >退出登录</van-button
    >
     <nav-bar></nav-bar>
  </div>
</template>

<script>
import { reactive, onMounted, toRefs,ref } from "vue";
import md5 from "js-md5";
import navBar from "@/components/NavBar";
import sHeader from "@/components/SimpleHeader";
import { updateUserInfo, EditUserInfo, logout } from "@/service/user";
import { setLocal } from "@/common/js/utils";
import { useRoute, useRouter } from "vue-router";
import { Toast } from "vant";
export default {
  components: {
    sHeader,
    navBar
  },
  setup() {
    const router = useRouter();
    const showPicker = ref(false);
    const state = reactive({
      nickName: "",
      country: "",
      description: "",
      password: "",
      id: "",
    });

    onMounted(async () => {
      let data = JSON.parse(localStorage.getItem("userinfo"));

      state.nickName = data.nickname;
      state.country = data.country;
      state.description = data.description;
      state.id = data.id;
    });

    const save = async () => {
      //   "id": "211221GRA285SNR4",
      // "nickname": "Tom",
      // "number": "54321",
      // "sex": 2,
      // "birthday": "2011-11-01",
      // "country": "中国",
      // "description": "hihihi"
      const params = {
        introduceSign: state.introduceSign,
        nickname: state.nickName,
        country: state.country,
        description: state.description,
        id: state.id,
      };
      await updateUserInfo(params).then((rep) => {
        console.log(rep);

        router.push({ name: "user" });
        setTimeout(() => {
          Toast.success("保存成功");
        }, 500);
      });
    };

    const handleLogout = async () => {
      await logout({ userId: state.id }).then(() => {
        localStorage.clear();
        Toast.success("退出成功");
        window.location.href = "/";
      });
    };
    const onConfirm = (value) => {
      
      country.value = value;
      showPicker.value = false;
    };

    return {
      onConfirm,
      showPicker,
      ...toRefs(state),
      save,
      handleLogout,
    };
  },
};
</script>

<style lang="less" scoped>
.seting-box {
  .save-btn {
    width: 80%;
    margin: 20px auto;
  }
}
</style>
